<template>
  <div class="container">
    <van-nav-bar
      title="发票列表"
      left-text=""
      left-arrow
      :z-index=99
      @click-left="routeToPath('')"
    />
    <div class="card" v-for="i in data">
      <div class="group1 over">
        <div class="name fl">
          商户单号：20193434343422
        </div>
        <div class="value green fr" v-if="i == 'success'">
          购买成功
        </div>
        <div class="value red fr" v-else-if="i == 'error'">
          购买失败
        </div>
        <div class="value green fr" v-else-if="i == 'some'">
          部分成功
        </div>
      </div>
      <div class="group2 over">
        <div class="name green fl">
          环影影城（儿童票）
        </div>
        <div class="key green">
          x2
        </div>
        <div class="value green fr">
          ￥265.00
        </div>
      </div>
      <div class="group3 over">
        <div class="name yellow fl">
          商品总计
        </div>
        <div class="value yellow fr">
          ￥506.00
        </div>
      </div>
      <div class="group4 over">
        <div class="name fl">
          2019-01-31 12:12:12
        </div>
        <div class="key btn-error fr" v-if="i == 'some'">
          申请退款
        </div>
        <div class="value btn-success fr"  v-if="i == 'success'|| i == 'some'">
          查看电子发票
        </div>
        <div v-else class="value btn-error fr">
          申请退款
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar } from 'vant';
export default {
  name: 'OrdersList',
  data() {
    return {
      data: ['success', 'error', 'some']
    }
  },
  components: {
    [NavBar.name]:NavBar,
  },
  created() {

  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
  .green{
    color: #67C23A;
  }
  .yellow{
    color: #E6A23C;
  }
  .red{
    color: #F56C6C;
  }
  .btn-success{
    border: 1px solid #67C23A;
    display: inline-block;
    border-radius: .1rem;
    color: #67C23A;
    text-align: center;
    padding: .1rem;
    font-size: .36rem;
  }
  .btn-error{
    border: 1px solid #F56C6C;
    display: inline-block;
    border-radius: .1rem;
    color: #F56C6C;
    text-align: center;
    padding: .1rem;
    font-size: .36rem;
  }
  .card{
    border: 1px solid #eee;
    padding: .3rem;
    padding-bottom: 0;
    border-radius: .3rem;
    margin: .3rem;
    margin-bottom: 0;
    .group1,.group2,.group3,.group4{
      padding-bottom: .3rem;
    }
    .group1{
      .name{
        font-size: .36rem;
        padding-top: .05rem;
      }
    }
    .key{
      float: left;
      width: 30%;
      text-align: center;
    }
    .group4 .name{
      font-size: .36rem;
      line-height: .6rem;
      color: #888;
    }
    .group4 .key{
      width: 18%;
      margin: 0 auto;
      margin-left: 6%;
      text-align: center;
    }
  }
</style>
